<template>
  <div id="test">
    <a-button v-perm:disabled="3" @click="open" type="primary">
      打开弹窗
    </a-button>
    <div class="container">
      <div class="inner" @mousemove="mousemove">
        <button type="button">Go Ahead</button>
        <div class="blob"></div>
      </div>
      <div class="inner" @mousemove="mousemove">
        <button type="button">Hover Us</button>
        <div class="blob"></div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useModal } from "@vue-ant-plus/hooks";
import test from "./forms/test.vue";
import { Button } from "ant-design-vue";
import { createVNode, ref } from "vue";
const loading = ref<Boolean>(false);
const open = () => {
  let a = useModal({
    title: "231",
    content: "test",
    componentSlots: {
      footer: () => {
        return createVNode(
          Button,
          {
            type: "primary",
            loading: loading.value,
            onClick: (item) => {
              a.handleClose();
            },
          },
          {
            default: () => "查询",
          }
        );
      },
    },
    //isDrag: true,
    // handleOk: ({ remove, instance }) => {
    //   return new Promise((resolve, reject) => {
    //     instance.schemaForm
    //       .validated()
    //       .then((vals) => {
    //         resolve(vals);
    //       })
    //       .catch(() => {
    //         reject();
    //       });
    //   });
    // },
  });
};
const mousemove = (e) => {
  let target = e.target;
  const rect = target.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  target.style.setProperty("--x", `${x}px`);
  target.style.setProperty("--y", `${y}px`);
  target.style.setProperty("--height", `${rect.height}px`);
  target.style.setProperty("--width", `${rect.width}px`);
};
</script>
<style lang="less">
.container {
  --elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --x: 0px;
  --y: 0px;
  --t: rgba(255, 255, 255, 0.001);
  --lightest: #f897d5;
  --light: #f567c2;
  --dark: #755ad0;
  --darkest: #1a2a6c;
  position: relative;
  width: auto;
  overflow: hidden;
  padding: 0.5rem;
  display: flex;
  justify-content: flex-end;
  mix-blend-mode: darken;
  z-index: 1;
  margin: 0 -1rem;
  &:last-of-type {
    justify-content: start;
  }
  &:hover {
    z-index: 2;
  }
  &:nth-of-type(2) {
    --lightest: #ffd986;
    --light: #fdbb2d;
    --dark: #b21f1f;
    --darkest: #1a2a6c;
  }
}
.inner {
  display: inline-block;
  position: relative;
  pointer-events: all;
  z-index: 2;
  cursor: pointer;
  box-shadow: 0 0 0 500vmin #e8e6de;
  button {
    padding: 35px 60px;
    border: none;
    font-size: 24px;
    position: relative;
    background: transparent;
    color: #fff;
    z-index: 2;
    cursor: pointer;
    font-weight: 100;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: "Avant", "Futura", sans-serif;
  }
  &:before {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: 0rem;
    left: 0rem;
    filter: blur(2px) brightness(0);
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.25) 0%,
        var(--t) 20%
      ),
      radial-gradient(
        circle at center,
        var(--lightest),
        var(--light) 5%,
        var(--dark) 30%,
        var(--darkest) 50%
      ),
      var(--darkest);
    background-size: 0px 0px, 0px 0px, 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 1;
    mix-blend-mode: lighten;
    z-index: 2;
    transition: transform 0.5s var(--elastic), background-size 0.25s ease-in-out,
      filter 0.5s ease-in-out;
    transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%));
    z-index: 2;
    pointer-events: none;
  }
}
</style>
